<template>
  <el-dialog
    title="选择企业成员"
    :visible.sync="$attrs.visable"
    width="800px"
    :before-close="handleClose"
    append-to-body
    class="dialog_nopadd"
  >
    <div class="flex h_box">
      <div class="p-20 hboxleft h_full">
        <div class="boxinner h_full flexcolumn">
          <div class="euserheader flexcenter p-12">
            <el-input
              :placeholder="placeholder"
              v-model="queryParams.keyword"
              class="inputwith"
              size="small"
              style="width: 320px"
              @keyup.enter.native="handleQuery"
            >
              <el-button
                slot="append"
                type="primary"
                icon="el-icon-search"
                @click="handleQuery"
              ></el-button>
            </el-input>
          </div>
          <div v-if="!isSearch" class="emptybox flexcenter">请先搜索成员</div>
          <div v-else class="flex11 p-0">
            <div class="flex tableheader">
              <div class="tableline1 p-8">
                <i class="el-icon-circle-plus-outline f-18 commhover" @click="handleCheckAll"></i>
              </div>
              <div class="c_000 f-14 p-8 fw-6 tableline2">姓名</div>
              <div v-if="showremark" class="c_000 f-14 p-8 fw-6 tableline2">
                备注
              </div>
            </div>
            <div class="w_full scrolly">
              <div
                class="groupitem flex aligncenter"
                v-for="(item, index) in tableList"
                :key="index"
              >
                <div class="tableline1 p-8">
                  <i class="el-icon-circle-plus-outline f-18 commhover" @click="handleAdd(item,index)"></i>
                </div>
                <div class="flex tableline2 p-8">
                  <div class="w_full commhover flex">
                    <img
                      src="https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0"
                      alt=""
                      class="useravatar mr-12"
                    />
                    <div class="itemcontent flex aligncenter">
                      <div class="c_text2 f-14 textover">{{item.name}}</div>
                    </div>
                  </div>
                </div>
                <div v-if="showremark" class="tableline2 p-8 f-14">--</div>
              </div>
            </div>
            <div v-if="!tableList.length" class="emptybox flexcenter c_text4">
              暂无数据
            </div>
          </div>
        </div>
      </div>
      <div class="box1 box4 h_full">
        <div class="boxheader flexbetween">
          <span class="c_text2 fw-6 ml-12">已选择成员({{checkGroupList.length}})</span>
        </div>
        <div class="boxbody p-12">
          <div
            class="flexbetween p-8 bg_fff checkitem p-8"
            v-for="(item, index) in checkGroupList"
            :key="index"
          >
            <div class="w_full commhover flex">
              <img
                src="https://wework.qpic.cn/wwpic/576270_jL0ikDqEQ1SA2FC_1697685555/0"
                alt=""
                class="useravatar mr-12"
              />
              <div class="itemcontent flex aligncenter">
                <div class="c_text2 f-14 textover">{{item.name}}</div>
              </div>
            </div>
            <div>
              <i class="el-icon-remove-outline f-16 c_ff0200 commhover" @click="handleDelete(item,index)"></i>
            </div>
          </div>
          <div v-if="!checkGroupList.length" class="emptybox flexcenter">暂无已选择成员</div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button size="small" @click="handleClose">取 消</el-button>
      <el-button size="small" type="primary" @click="handleSubmit"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        keyword: "",
      },
      isSearch: false,
      tableList: [
        { id: 1, name: "测试群1", checked: false, index: 0 },
        { id: 2, name: "测试群2", checked: false, index: 1 },
        { id: 3, name: "测试群3", checked: false, index: 2 },
      ],
      total: 0,
      checkGroupList: [],
      checkedAll: false, //全选
    };
  },
  props: {
    placeholder: {
      type: String,
      default: "搜索成员的姓名、备注、描述",
    },
    showremark: {
      //是否展示备注
      type: Boolean,
      default: true,
    },
  },
  methods: {
    handleClose() {
      this.$emit("close", 1); //关闭弹窗;
      this.$emit("update:visable", false);
    },

    getList() {},

    handleQuery() {
      if (this.queryParams.keyword) {
        this.isSearch = true;
        this.queryParams.pageNum = 1;
        this.getList();
      }
    },

    handleAdd(item,index){
      this.checkGroupList.push(item)
      this.tableList.splice(index,1)
    },

    handleCheckAll(){
      
      // this.tableList.forEach(item=>{})
      this.checkGroupList = [...this.checkGroupList,...this.tableList]
      this.tableList = []
    },

    handleDelete(item,index){
      this.tableList.splice(item.index,0,item)
      this.checkGroupList.splice(index,1)
    },

    handleSubmit() {},
  },
};
</script>

<style lang="scss" scoped>
.h_box {
  height: 580px;
}
.box1 {
  border-right: 1px solid #e9e9e9;
}
.boxheader {
  padding: 0 12px;
  height: 42px;
  // background: #fafafa;
  border-bottom: 1px solid #e9e9e9;
  position: sticky;
  top: 0;
  z-index: 11;
}
.tableheader {
  background-color: #fafafa;
}
.tableline1 {
  width: 10%;
}
.tableline2 {
  // width: 45%;
  flex: 1 1;
}
.boxbody {
  height: calc(100% - 42px);
  overflow-y: auto;
  padding: 10px 0;
}
.checkitem {
  border: 1px solid #e9e9e9;
}
.itemcontent {
  width: calc(100% - 52px);
}

.boxinner {
  border: 1px solid #e9e9e9;
}
.euserheader {
  border-bottom: 1px solid #e9e9e9;
}
.inputwith {
  ::v-deep .el-input-group__append {
    padding: 0 15px;
    background-color: #3b74ff;
    color: #fff;
    border-color: #3b74ff;
  }
}
.scrolly {
  max-height: 448px;
  overflow-y: auto;
}
.groupitem {
  width: 100%;
  border-bottom: 1px solid #e9e9e9;
  &.active {
    background-color: #ebf2ff;
  }
  &:hover {
    background-color: #f0f0f0;
  }

  .groupleft {
    width: calc(100% - 50px);
  }
}
.hboxleft {
  width: calc(100% - 280px);
}
.box4 {
  width: 280px;
  background-color: #f5f5f5;
}
.emptybox {
  margin-top: 180px;
}
</style>